/* 数据格式演示
var aqiSourceData = {
  "北京": {
    "2016-01-01": 10,
    "2016-01-02": 10,
    "2016-01-03": 10,
    "2016-01-04": 10
  }
};
*/

// 以下两个函数用于随机模拟生成测试数据
function getDateStr(dat) {
  var y = dat.getFullYear();
  var m = dat.getMonth() + 1;
  m = m < 10 ? '0' + m : m;
  var d = dat.getDate();
  d = d < 10 ? '0' + d : d;
  return y + '-' + m + '-' + d;
}
function randomBuildData(seed) {
  var returnData = {};
  var dat = new Date("2016-01-01");
  var datStr = ''
  for (var i = 1; i < 92; i++) {
    datStr = getDateStr(dat);
    returnData[datStr] = Math.ceil(Math.random() * seed);
    dat.setDate(dat.getDate() + 1);
  }
  return returnData;
}

var aqiSourceData = {
  "北京": randomBuildData(500),
  "上海": randomBuildData(300),
  "广州": randomBuildData(200),
  "深圳": randomBuildData(100),
  "成都": randomBuildData(300),
  "西安": randomBuildData(500),
  "福州": randomBuildData(100),
  "厦门": randomBuildData(100),
  "沈阳": randomBuildData(500)
};

// 用于渲染图表的数据
var chartData = {};

// 记录当前页面的表单选项
var pageState = {
  nowSelectCity: 0,
  nowGraTime: "day"
}

/**
 * 渲染图表
 */
function renderChart(chartData) {
  var diagram = document.getElementsByClassName("aqi-chart-wrap")[0];
  if (diagram.childElementCount != 0) {
    var child = diagram.children;
    var c_len = child.length;
    var i = 0;
    while (i < c_len) {
      diagram.removeChild(child[i]);
      c_len--;
    }
  }
  diagram.style.border="solid";//delete
  diagram.style.display = "flex";
  diagram.style.justifyContent = "space-around";
  diagram.style.alignItems="flex-end";
  var len=0;
  for(var j in chartData){
    len++;
  }
  var color_num=0;
  for (var j in chartData) {
    color_num++;
    var div = document.createElement("div");
    div.style.height = chartData[j] + "px";
    div.style.width=1+"%";
    if(len===3){
      div.style.width=10+"%";
    }
    if(len>3&&len<91){
      div.style.width=5+"%";
    }
    if(color_num%2===0){
      div.style.backgroundColor="red";
    }else if(color_num%3===0){
      div.style.backgroundColor="blue";
    }
    else if(color_num%5===0){
      div.style.backgroundColor="green";
    }
    else if(color_num%7===0){
      div.style.backgroundColor="yellow";
    }else{
      div.style.backgroundColor="black";
    }
    diagram.appendChild(div); 
  }
  
}

/**
 * 日、周、月的radio事件点击时的处理函数
 */
function graTimeChange() {
  var event = document.getElementsByTagName("input");
  for (var e = 0; e < 3; e++) {
    var event_date = event[e];
    if (!event_date.checked) {
      continue;
    }
    pageState["nowGraTime"] = event_date.value;
    initAqiChartData();
    renderChart(chartData);
  }
  // 确定是否选项发生了变化 

  // 设置对应数据

  // 调用图表渲染函数
}

/**
 * select发生变化时的处理函数
 */
function citySelectChange() {
  var option_index = document.getElementById("city-select").selectedIndex;
  pageState["nowSelectCity"] = option_index;
  initAqiChartData();
  renderChart(chartData);
  // 确定是否选项发生了变化 

  // 设置对应数据

  // 调用图表渲染函数
}

/**
 * 初始化日、周、月的radio事件，当点击时，调用函数graTimeChange
 */
function initGraTimeForm() {
  var input = document.getElementsByTagName("input");
  var len = input.length;
  for (var i = 0; i < len; i++) {
    input[i].onclick = function () {
      graTimeChange();
    };
  }
}

/**
 * 初始化城市Select下拉选择框中的选项
 */
function initCitySelector() {
  var select = document.getElementById("city-select");
  for (var i in aqiSourceData) {
    if (i === "北京") { continue; }
    var option = document.createElement("option");
    option.appendChild(document.createTextNode(i));
    select.appendChild(option);
  }
  select.onchange = function () {
    citySelectChange();
  }
  // 读取aqiSourceData中的城市，然后设置id为city-select的下拉列表中的选项
  // 给select设置事件，当选项发生变化时调用函数citySelectChange
}

/**
 * 初始化图表需要的数据格式
 */
function initAqiChartData() {
  var chartData_city = {};
  var cityIndex = pageState["nowSelectCity"];
  var option = document.getElementsByTagName("option");
  var city = option[cityIndex].value;
  for (var c in aqiSourceData) {
    if (city === c) {
      chartData_city = aqiSourceData[c];
      break;
    }
  }
  var dateSelect = pageState["nowGraTime"];
  if (dateSelect === "day") {
    chartData = chartData_city;
  }
  if (dateSelect === "week") {
    var date_week = {};
    var len = chartData_city.length;
    var multiple = len / 7;
    var j = 0;
    var sum = 0;
    var tmp = 0;
    for (var i in chartData_city) {
      j++;
      sum += chartData_city[i];
      if (j % 7 === 0) {
        tmp++;
        avg = sum / 7;
        date_week["number" + tmp + "week"] = avg;
        sum = 0;
      }
      if (j % 7 != 0 && j === len) {
        tmp++;
        avg = sum / (j % 7);
        date_week["number" + tmp + "week"] = avg;
        sum = 0;
      }
    }
    chartData = date_week;
  }
  if (dateSelect === "month") {
    date_month = {};
    var len = chartData_city.length;
    var num = 0;
    var summ = 0;
    var avgm = 0;
    var tmp = 0;
    for (var i in chartData_city) {
      num++;
      summ += chartData_city[i];
      if (num === 31) {
        tmp++;
        avgm = summ / 31;
        summ = 0;
        date_month["number" + tmp + "month"] = avgm;
      }
      if (num === 60) {
        tmp++;
        avgm = summ / 29;
        summ = 0;
        date_month["number" + tmp + "month"] = avgm;
      }
      if (num === 91) {
        tmp++;
        avgm = summ / 31;
        summ = 0;
        date_month["number" + tmp + "month"] = avgm;
      }
    }
    chartData = date_month;
  }
  
  // 将原始的源数据处理成图表需要的数据格式
  // 处理好的数据存到 chartData 中
}

/**
 * 初始化函数
 */
function init() {
  initGraTimeForm();
  initCitySelector();
  initAqiChartData();
  renderChart(chartData);
}
function load() {
  init();
}

